<template>
  <div>
    <div class="top">
      <img src="static/img/login.png" alt="">
      <div class="code" @tap="toggle('code')">验证码登录</div>
      <div class="acc" @tap="toggle('acc')">账号登录</div>
      <!-- 左边的三角形 -->
      <div v-show="show === 'code'" class="triangle_border_left">
        <span></span>
      </div>
      <!-- 右边的三角形 -->
      <div v-show="show === 'acc'" class="triangle_border_right">
        <span></span>
      </div>
    </div>
    <div class="bottom">
      <div v-show="show === 'code'" class="login-code">
        <label for="phone">手机号</label>
        <input v-model="phonenumber" class="metra-input" type="text" name="phone" id="phone" placeholder="请输入你的手机号"/>
        <label for="code">验证码</label>
        <div class="parent">
          <input v-model="authcode" class="metra-input" type="text" name="phone" id="code" placeholder="短信验证码"/>
          <Captcha type="login" :phonenumber="phonenumber" class="authcode"></Captcha>
        </div>
      </div>
      <div v-show="show === 'acc'" class="login-acc">
        <label for="username">用户名</label>
        <input v-model="username" class="metra-input" type="text" name="phone" id="username" placeholder="请输入你的手机号"/>
        <label for="password">密码</label>
        <input v-model="password" class="metra-input" type="password" name="phone" id="password" placeholder="密码"/>
      </div>
      
      <div>
        <div @tap="login">
          <mt-button  type="primary" size="large">登 录</mt-button>
        </div>
        <div class="newuser">
          <router-link class="aline-left" to="/findpassword"><span>  忘记密码？</span></router-link>
          <router-link class="aline-right" to="/register"> <span>新用户注册</span></router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {Button} from 'mint-ui'
  import Captcha from '@/components/common/Captcha'
  import { getToken,regPhone } from "../../config/utils"
  import API from  '../../config/api'
  import storage from 'storejs'
  import { UPDATE_USER,UPDATE_TABBAR } from "../../store/mutation-types";

  export default {
    name: "Login",
    components: {Button, Captcha},
    data: function () {
      return {
        show: 'code', // 当前登录类型，验证码登录，
        phonenumber: '',
        authcode: '',
        username: '',
        password: '',
        token: ''
      }
    },
    mounted: function () {
      getToken().then((res) => {
        this.token = res;
      });
    },
    methods: {
      toggle(type) {
        this.show = type;
      },
      reg: function () {
        if ((!regPhone(this.username)&& this.show== 'acc') || (!regPhone(this.phonenumber) && this.show == 'code')) {
          this.$msg('请输入正确的手机号码');
          return false;
        }
        if (!this.password && this.show == 'acc') {
          this.$msg('请输入密码');
          return false;
        }
        if (!this.authcode && this.show == 'code') {
          this.$msg('请输入验证码');
          return false;
        }
        return true;
      },
      login: function () {
        if (!this.reg()) {
          return;
        }
        var url, params;
        if (this.show == 'acc') {
          //账号登录
          url = API.login;
          params = {
            token: this.token,
            username: this.username,
            password: this.password
          }
        } else {
          //短信登录 17858610532  15846635967 18838299806
          url = API.loginByAuthCode;
          params = {
            token: this.token,
            username: this.phonenumber,
            authcode: this.authcode
          }
        }
    
        this.$axios.post(url, params).then((res) => {
          if (res.code == 1) {
            this.$msg('登录成功');
            //登录成功，保存用户信息
            storage.set('username', this.phonenumber || this.username);
            storage.set('password', this.password);
            storage.set('freeCount',0); //登录成功后重置为0，查询商标时才可以继续查询
            this.$router.push('/');
          }
          if (res.code == 0) {
            //密码错误
            this.$msg(res.message);
          }
        })
      }
    }
  }
</script>

<style scoped>
  .top {
    position: relative;
  }
  
  .top img {
    width: 100%;
  }
  
  .top .acc {
    position: absolute;
    bottom: 0.38rem;
    right: 1.29rem;
    font-size: 0.24rem;
    color: #fff;
  }
  
  .top .code {
    position: absolute;
    bottom: 0.38rem;
    left: 1.29rem;
    font-size: 0.24rem;
    color: #fff;
  }
  
  /*向上*/
  .triangle_border_left {
    position: absolute;
    left: 1.65rem;
    bottom: 0;
    width: 0;
    height: 0;
    border-width: 0 0.25rem 0.25rem;
    border-style: solid;
    border-color: transparent transparent #fff; /*透明 透明  灰*/
  }
  
  /*向上*/
  .triangle_border_right {
    position: absolute;
    right: 1.65rem;
    bottom: 0;
    width: 0;
    height: 0;
    border-width: 0 0.25rem 0.25rem;
    border-style: solid;
    border-color: transparent transparent #fff; /*透明 透明  灰*/
  }
  
  .metra-input {
    border: none;
    border-bottom: 1px solid #d8d8d8;
    height: 0.8rem;
  }
  
  .bottom {
    padding: 0.4rem 0.8rem 0;
  }
  
  .bottom input {
    padding: 0;
    border-radius: 0;
  }
  
  .bottom label {
    font-size: 0.24rem;
    color: #333;
  }
  
  .bottom input {
    font-size: 0.32rem;
    
  }
  
  .newuser {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding: 0.13rem 0.1rem;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  
  .newuser span {
    flex: 1;
    font-size: 0.24rem;
    color: #007BC8;
  }
  
  .newuser .aline-left {
    text-align: left;
  }
  
  .newuser .aline-right {
    text-align: right;
  }
  
  .parent {
    position: relative;
  }
  
  .parent .authcode {
    position: absolute;
    top: 0.16rem;
    right: 0;
    font-size: 0.32rem;
    color: #FF6766
  }
  
  .mint-button {
    height: 0.8rem;
    font-size: 0.3rem;
  }
</style>
